replacing string value and keep part of the replace string using javascript

Question

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??

Answer 1

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> 

Answer 2

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)