Соответствует части текста внутри тега

Question

Я в контексте на стороне клиента. У меня есть этот HTML:

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

Я хочу, чтобы соответствовать только \ п элемент внутри абзаца, а заменить только это с «бр» метки.

Я хочу сделать это только внутри тега «p» и для всех совпадений.

Я должен использовать регулярное выражение в javascript.

Спасибо и извините за мой плохой английский.

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

UPDATE 1: Если это строка, то используйте String#replace метод.

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

---

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

---

ОБНОВЛЕНИЕ 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>

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