使用JavaScript替换字符串值并保留替换字符串的一部分

Question

我有一个富文本框，用户可以在其中设计HTML页面，但我无法访问TextArea的keyup或keydown事件，因此无法在运行时更改用户输入的内容。最终我将获得一个包含各种HTML标签的富文本值，任何HTML标记都允许在该富文本值中。现在我想将用户输入的任何数字更改为单词，例如如果用户输入1，则希望将其替换为单词（one），对于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>

如果我使用了之前字符串的模式，获取左侧有'>'且右侧有'<'的字符串，那么我只会得到'Title1: Hi iam first title'，所以我需要替换在这个结果字符串中找到的数字才能得到想要的输出。

这种方式可行吗？还是我需要重新考虑使用正则表达式并找到另一种完成任务的方法？

- محمد عبد الرحمن

---

你可能想先阅读这篇文章：使用JS解析HTML字符串。 - Wiktor Stribiżew

Answer 1

您可以使用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>

- Tushar

---

如果我只需要处理h1和h2这些标签，这个解决方案很好，但是我的oldvalue可能包含任何HTML标签，比如<div style='width:3px'></div>。我需要一个更通用的解决方案来处理所有的HTML标签。 - محمد عبد الرحمن

@محمدعبدالرحمن “但是我的oldvalue可能包含任何HTML标签，例如<div style='width:3px'></div>” 根据问题中的要求描述，<div style='width:3px'></div> 不应受到替换的影响？您应该能够在 jQuery() 中添加多个选择器，并使用上面当前答案中的模式替换多个数字到 num 中？ - guest271314

@محمدعبدالرحمن 你只需要在 $('h1, h2') 中添加选择器，或者你甚至可以使用通用选择器 $('*')。 - Tushar

@Tushar 非常感谢你，我认为这个方法很好用，但是还有一个问题，我有一个 HTML 字符串： 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>"; 我该如何将其转换为文档元素并应用通用选择器呢？因为 $('*') 只能在当前文档中使用，而这不是我的目标。 - محمد عبد الرحمن

@محمدعبدالرحمن 您可以为所有元素添加一些类，并使用 $('.myClass') 选择器，或者将类添加到其容器中并使用 $('containerSelector *') 选择器。 - Tushar

Answer 2

你可以使用正则表达式 /(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)

- guest271314

---

如果我面对的所有标签都以数字结尾并且后面跟着字符“>”，那么这将是很好的，但实际上我的情况可能包含任意数量和任何类型的标签，例如<div style='width:3px'>title3</div>。我需要一个更通用的解决方案来处理所有HTML标签。 - محمد عبد الرحمن

@MohammedAbdulrahman：“我需要一个更通用的解决方案，适用于所有HTML标记。”原始问题中的示例字符串仅包含h1，h3标记。您能否更新问题描述实际使用的html字符串以及您尝试实现的目标？ - guest271314

@محمدعبدالرحمن 你可以使用Tushar发布的解决方案：将数字映射到单词，用对象的值替换数字。 - guest271314