Wie Regex zu verwenden, um Text zwischen Tags zu ersetzen

Question

Ich möchte etwas Text in einer Zeichenfolge ersetzen, die ein Div-Tag darstellt, das auch Stil- und Klassenattribute enthalten kann oder auch nicht. Zum Beispiel

var s = "<div style='xxx' class='xxx'>replaceThisText<div> 

Wenn es nur den Tag war, glaube ich, konnte ich dies nur tun:

str = str.replace(/<div>[\s\S]*?<\/div>/, '<div>' + newText+ '<\/div>'); 

Aber wie mache ich die Attribute berücksichtigt?

Answer 1

Generieren Sie ein temporäres Element mit Ihrer Zeichenfolge als HTML-Inhalt und holen Sie sich das div darin, um den Inhalt zu aktualisieren, nachdem Sie den Inhalt aktualisiert haben, erhalten Sie den HTML-Code des temporären Elements zurück.

var s = "<div style='xxx' class='xxx'>replaceThisText<div>"; 
 

 
// create a temporary div element 
 
var temp = document.createElement('div'); 
 

 
// set content as string 
 
temp.innerHTML = s; 
 

 
// get div within the temporary element 
 
// and update the content within the div 
 
temp.querySelector('div').innerHTML = 'newText'; 
 

 
// get back the current HTML content in the 
 
// temporary div element 
 
console.log(temp.innerHTML)

Warum regex nicht?

RegEx match open tags except XHTML self-contained tags

Using regular expressions to parse HTML: why not?

Answer 2

Regex wird nie eine gute Entscheidung zu analysieren html zufrieden sein.
Betrachten Sie die folgende kurze Lösung DOMParser-Objekt (für Browser, die DOMParser Implementierung unterstützen, finden Sie compatibility table):

var s = "<div style='xxx' class='xxx'>replaceThisText<div>", 
 
    tag = (new DOMParser()).parseFromString(s, 'text/html').querySelector('.xxx'); 
 

 
tag.textContent = 'newText'; // replacing with a new text 
 
console.log(tag.outerHTML); // outputs the initial tag representation with replaced content

https://developer.mozilla.org/ru/docs/Web/API/DOMParser