使用javascript替换字符串值并保留部分替换字符串

Question

我有一个到达文本框，用户可以在其中设计一个 html 页面，我无法访问 TextArea 的事件 keyup 或 keydown，所以我无法在运行时更改用户输入数字的输入，所以我会最后得到一个包含各种html标签的reachtext值，并且在reachtext值中允许任何html标签，现在我想将用户在文本中输入的任何数字更改为word，这意味着如果用户输入1我想要它是单词（一）和 2,3,4.. 等，但同时我想保留在 html 标签中找到的数字，不做任何更改，以保持用户对到达文本所做的样式他设计，现在例如，如果我有以下生成的 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>

这只是一个示例，但用户可以构建任何 html 设计、样式和标签，因此输入可能会有所不同并且比此示例更复杂。 使用 javascript 我想将其更改为：

<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;
    }
});

但是这段代码的结果

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

我尝试使用正则表达式仅替换任意之间的字符串 (>) 和 (<) 但不知道如何构造正则表达式， 请帮忙。 现在我想指定一个仅替换 html 中的文本并且不更改 html 标签的样式或属性中的数字的模式，我认为可以通过使用正则表达式找到一个模式来完成就是左边有'>'，右边有'

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

如果我通过获取左边有“>”和右边有“

Answer 1

如果字符后面没有> 字符，您可以使用RegExp /(1|2|3)(?!>)/g 匹配1、2 或3

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)

Answer 2

您可以使用jQuery text(function) 方法来更新元素的innerText。

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