匹配标签内的部分文本答案

【问题标题】：Match part of text inside of tag匹配标签内的部分文本
【发布时间】：2016-12-18 09:31:18
【问题描述】：

我在客户端上下文中。我有这个 html：

<p>Text text \n other text </p>

我只想匹配段落内的 \n 元素，并且只用“br”标签替换它。

我只想在标签“p”内执行此操作，并且所有匹配。

我应该在 javascript 中使用正则表达式。

感谢和抱歉我的英语不好。

【问题讨论】：

标签： javascript jquery html regex

【解决方案1】：

使用带有回调的html() 方法和使用String#replace 方法的内部回调替换文本。

$('p').html(function(i, htm) {
  return htm.replace(/\\n/g, '<br>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text text \n other text</p>

更新 1： 如果是字符串，则使用 String#replace 方法。

console.log(
  '<p>Text text \n other text</p>'.replace(/\n/g, '<br>')
)

更新 2： 如果字符串包含其他标记元素，而您只想更新 p 标记，请执行类似操作。

var str = '<p>Text text \n other text</p>';

console.log(
  // create a temporary div eleemnt 
  $('<div>', {
    // set html content from string
    html: str
  })
  // get all p tags
  .find('p')
  // iterate and replace \n
  .html(function(i, htm) {
    // replace \n with br tag
    return htm.replace(/\n/g, '<br>')
  })
  // back to the temp div
  .end()
  // get it's updated html content
  .html()
)

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

更新 3： 使用纯 JavaScript 通过生成临时 DOM 元素。

var str = '<p>Text text \n other text</p>';
// create a temporary div element
var div = document.createElement('div');
// set html content form string
div.innerHTML = str;
// get all p tags and convert into Array using Array.from
// for older browser use [].sclice.call instead
Array.from(div.getElementsByTagName('p'))
  // iterate over p tags
  .forEach(function(el) {
    // update the html content
    el.innerHTML = el.innerHTML.replace(/\n/g, '<br>')
  });
// get updated html content
console.log(div.innerHTML);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

对不起..我必须纠正我“
文本文本\n其他文本
”是一个字符串，我从另一个方法得到这个。
我想解析这个字符串。然后使用解析后的html。
是的..但是这个字符串是一个例子。该字符串还可能包含其他标签。我希望这个替换只在“p”标签内

【解决方案2】：

您可以将for 循环与getElementsByTagName 一起使用：

for(i = 0; i < window.document.getElementsByTagName("p").length; i++){
    window.document.getElementsByTagName("p")[i].innerHTML = window.document.getElementsByTagName("p")[i].innerHTML.replace(/\\n/g, "<br/>");
}

如果这是在字符串中而不是在 HTML 中，您可以将其添加到 <div> 元素中，同时像这样处理它：

var myString = "<p>Text text \n other text </p>";
var div = document.createElement("div");
div.innerHTML = myString;
for(i = 0; i < div.getElementsByTagName("p").length; i++){
    div.getElementsByTagName("p")[i].innerHTML = div.getElementsByTagName("p")[i].innerHTML.replace(/\\n/g, "<br/>");
}
myString = div.innerHTML;

【讨论】：