匹配标签内的部分文本

I am in client side context. I have this html:

我在客户端环境中。我有这个html:

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

I want to match only \n element inside paragraph, and replace only this with "br" tag.

我只希望在段落中匹配\n元素，并将其替换为“br”标记。

I want to do this only inside tag "p" and for all match.

我只希望在标签"p"和所有匹配项中这样做。

I supposed to use regex in javascript.

我应该在javascript中使用regex。

Thanks and sorry for my bad english.

谢谢你，很抱歉我的英语说得不好。

2 个解决方案

#1

Use html() method with callback and inside callback replace text using String#replace method.

使用带有回调的html()方法，在回调内部使用字符串#替换方法替换文本。

$('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>

UPDATE 1 : If it's a string then use String#replace method.

更新1:如果是字符串，那么使用string #replace方法。

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

UPDATE 2 : If the string contains other tag element and you just want to update the p tag then do something like.

更新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()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

UPDATE 3 : With pure JavaScript by generating a temporary DOM element.

更新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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

#2

You can use a for loop with getElementsByTagName:

可以使用带有getElementsByTagName的for循环:

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

If this is inside a string and not inside the HTML, you can add it to a <div> element while handling it like this:

如果它在字符串中，而不在HTML中，您可以将它添加到

元素中，同时像这样处理它:

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;

#1