img要素を除いて、範囲内のすべての単語をラップする正規表現

Question

テキストのすべての単語をスパンで囲むために、正規表現を見つけようとしています。私は次のコードを使用しています：

$this.html($this.text().replace(
     /([^\s]*\s)/g, "<span>$1</span>")); 

ここでこれはdiv要素と呼ばれています。しかし、div内にあるimgとa要素は消えます。私は、正規表現を変更しようとしました：

$this.html($this.text().replace(
     /([^(\s | <a.*/a> | <img.*/img>)]*\s)/g, "<span>$1</span>")); 

私は問題を解決しませんでした。

誰かが私を助けることができますか？

Answer 1

は、空白（\S）を置き換えます。この場合、1つ以上の関数（+）には、一致するものをパラメータとして使用します。

var str = 'Hello dear world <img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100"/> Hello dear world <img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100"/>'; 
 

 
function replaceThings(str) { 
 
    var pre = "<span style='background-color:yellow'>"; 
 
    var modString = str 
 
    .replace(/\S+/ig, function(word) { 
 
     return pre + word + "</span>" 
 
    }) 
 
    .split(pre + "<img").join("<img") 
 
    .split("/></span>").join("/>") 
 
    .replace(/<img{1}.*?\/>/ig, function (img){ 
 
    return img.split(pre).join("").split("</span>").join("") 
 
    }) 
 

 
    return modString; 
 
} 
 
console.log(replaceThings(str)); 
 

 
document.body.innerHTML = replaceThings(str)