3

I have a reach textbox where the user can design an html page,and i have no access to the event keyup nor keydown of the TextArea so i can not change the input in the runtime the user enteres the numbers,so i will get at last a reachtext value that contains a variety of html tags and any html tags are allowed in the reachtext value,now i want to change any numbers the user entered in the text to word, means if the user entered 1 i want it to be the word (one) and for 2,3,4.. etc, but in the meanwhile i want to keep the numbers found in the html tags as itis with no changes in order to keep the styling the user did to the reach text he designed,now for example if i have the following generated html: 

<h1>Title1: Hi iam first title</h1><h3>Title3 hi iam third title</h3>
<div style='width:23px'>iam a div with 23 pixels width</div>

that is only an example, but the user can construct any html design and styles and tags,so the input might differ and be more complex than this example. Using javascript I want to change it to:

<h1>Titleone: Hi iam first title</h1><h3>Titlethree hi iam third title</h3>\
<div style='width:23px'>iam a div with twothree pixels width</div>

var oldValue = '<h1>Title1: Hi iam first title</h1><h3>Title3 hi iam third title</h3>
<div style='width:23px'>iam a div with 23 pixels width</div>';
var newValue = oldValue.replace(/1|2|3/g, function convertNumbers(x) {
    switch (x) {
        case '1':
            return 'one';
            break;
        case '2':
            return 'two';
            break;
        case '3':
            return 'three';
            break;
    }
});

But this code results

<hone>Titleone: Hi iam first title</hone><hthree>Titlethree hi iam third title</hthree>
<div style='width:twothreepx'>iam a div with twothree pixels width</div>

I tried to use RegularExpressions to replace only the string between any (>) and (<) but didn't know how to construct the regular expression, please help. now what i want to specify a pattern that replaces only the text in the html and do not change the numbers in the styles or properties of the html tags,and in my opinion it can be done by finding a pattern using Regular Expressions to get on ly the text that has '>' at the left side and '<' at the right side,for example:

<h1>Title1: Hi iam first title</h1>

if i applied the pattern for the previous string by getting the string that has '>' at left and '<' at right, i will only get 'Title1: Hi iam first title' so i will replace then numbers found in this resulted string to get the output i want. is it possible, or i have to reconsider using the Regular Expression and find another way to do the task??

محمد عبد الرحمن
  • 31
  • 3
  • You might want to read this post first: [Parse a HTML String with JS](http://stackoverflow.com/questions/10585029/parse-a-html-string-with-js). – Wiktor Stribiżew Mar 21 '16 at 09:19

2 Answers2

4

You can use jQuery text(function) method to update the innerText of the elements.

// To store the string representation of the digits
var num = [undefined ,'one', 'two', 'three'];

// Iterate over all the `<h1>`, `<h3>`
$('h1, h3').text(function(i, text) {

    // Match 1, 2 or 3. Regex can also be written as `[123]` or `[1-3]`
    return text.replace(/1|2|3/g, function(number) {
        return num[number]; // Replace by the textual representation.
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<h1>Title1</h1><h3>Title3</h3>
Tushar
  • 85,780
  • 21
  • 159
  • 179
  • this solution will do it fine if the only tags iam dealing with is h1 and h2,but my oldvalue can contain any html tags for example
    i need a solution more generic for all the html tags     – محمد عبد الرحمن Mar 21 '16 at 14:41
  • @محمدعبدالرحمن _"but my oldvalue can contain any html tags for example
    "_ Given description of requirement at Question, `
    ` should not be affect by replacements ? You should be able to add multiple selectors at `jQuery()` , and multiple numbers to replace at `num` using pattern at current Answer above ?     – guest271314 Mar 21 '16 at 15:57
  • @محمدعبدالرحمن You just have to add the selectors in `$('h1, h2')` or you can even use universal selector `$('*')` – Tushar Mar 22 '16 at 05:10
  • @Tushar thank you alot man, i think this will work fine,but a little more thing i have the string of the html var oldValue ="

    Title1: Hi iam first title

    Title3 hi iam third title

    iam a div with 23 pixels width
    "; how i can change it to document element on the fly to applly the universal selector on it, since $('*') will work on the current document which is not my target     – محمد عبد الرحمن Mar 22 '16 at 06:30
  • @محمدعبدالرحمن You can add some class to all the elements and use `$('.myClass')` selector or add a class to it's container and use `$('containerSelector *')` selector. – Tushar Mar 22 '16 at 06:45
0

You could use RegExp /(1|2|3)(?!>)/g to match 1, 2, or 3 if character is not followed by > character

var oldValue = '<h1>Title1</h1><h3>Title3</h3>';
var newValue = oldValue.replace(/(1|2|3)(?!>)/g, function convertNumbers(x) {
  switch (x) {
    case '1':
      return 'one';
      break;
    case '2':
      return 'two';
      break;
    case '3':
      return 'three';
      break;
  }
});

document.write(newValue)
guest271314
  • 1
  • 15
  • 104
  • 177
  • this would be fine if all the tags iam facing ends with number followed by > character but actually my case can contain any number of tags and any type also, for example
    title3
    i need a solution more generic for all the html tags     – محمد عبد الرحمن Mar 21 '16 at 14:43
  • @محمدعبدالرحمن _"i need a solution more generic for all the html tags"_ Example string at original Question contains only `h1`, `h3` tags. Can you update Question to describe what you are trying to achieve with the actual `html` , strings used ? – guest271314 Mar 21 '16 at 15:55
  • @محمدعبدالرحمن You could use solution posted by Tushar; map numbers to words , replace number with value of object – guest271314 Mar 22 '16 at 05:13