blocks|key|1852458|text|好吧，我可能会按照@DanielBeck的建议来做DOM操作。一旦knouckout完成绑定，我将使用$.wrap+http://api.jquery.com/wrap/进行操作。我只是希望有一种不使用jquery的简单方法，所以如果有其他建议，请评论他们。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1852459|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/wrap/^0|1M|R|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Ok, I'm probably going to do DOM manipulation as @DanielBeck suggested. Once knouckout finished binding I will use $.wrap <a href="http://api.jquery.com/wrap/" rel="nofollow noreferrer">http://api.jquery.com/wrap/</a> to do my manipulation. I just hoped there was an easy way without using jquery, so if there are other suggestions please comment them.

blocks|key|1638381|text|使用正则表达式操作超文本标记语言是notoriously+problematic。在DOM解析器中微不足道的更改可能很难为其创建健壮的正则表达式；当正则表达式失败时，它会静默地失败，这使得错误很容易遗漏。在正则表达式中工作时，您还必须小心处理标记中所有可能的变化，例如空格、属性顺序、引号样式、标记结束样式、与html相似但不希望修改的属性内容等。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1638382|正如在下面的注释线程中详细讨论的那样，如果有足够的时间和精力，当然可以在regex中处理所有这些事情；但这会导致复杂的、难以维护的regex+--最重要的是，很难确保您的regex能够容纳所有可能的有效标记变体。DOM解析自动处理所有这些内容，并允许您直接处理结构化数据，而不必处理字符串表示中所有可能的变化。|1638383|因此，如果需要对HTML字符串进行重要更改，最好总是将HTML转换为真正的DOM树，使用标准DOM方法对其进行操作，然后(如果需要)将其转换回字符串。幸运的是，这样做不需要很多代码。下面是一个简单的普通JS演示：|1638384|​|1638385|var+htmlToElement+=+function(html)+{
++var+template+=+document.createElement('template');
++template.innerHTML+=+html.trim();
++return+template.content.firstChild;
};

var+elementToHtml+=+function(el)+{
++return+el.outerHTML;
}

//+Usage+demo:
var+string+=+"<div>This+is+some+html<img+src='http://example.com'></div>";

var+foo+=+htmlToElement(string);

//+perform+your+DOM+manipulation+as+needed+on+foo+here.+This+would+look+much+simpler+if+I+wasn't+so+stubborn+about+avoiding+jQuery+these+days,+but+here+we+are+anyway:
foo.querySelectorAll('img').forEach(function(img)+{
++++var+link+=+document.createElement('a');
++++link.setAttribute('data-fancybox',true);
++++link.setAttribute('href',+img.getAttribute('src'));
++++img.parentNode.insertBefore(link,img);
++++link.appendChild(img);
});

//+back+to+a+string:
var+bar+=+elementToHtml(foo);
console.log(bar);|code-block|syntax|javascript|1638386|1638387|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags^0|H|N|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|C|$M|N]]|$1|O|3|I|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

Manipulating HTML with regex is <a href="https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags">notoriously problematic</a>. Changes that would be trivial in a DOM parser can be very difficult to create a robust regex for; and when regex fails, it fails silently, which makes errors easy to miss. When working in regex you also have to be careful to handle all possible variations in markup such as whitespace, attribute order, quoting style, tag closing style, attribute contents that resemble html but which you don't want modified, etc. 

As discussed exhaustively in the comment thread below, given enough time and effort it's certainly possible to handle all of these things in regex; but it leads to a complex, difficult to maintain regex -- and most importantly it's difficult to be certain your regex accommodates every possible valid markup variation. DOM parsing handles all of this stuff automatically, and lets you work with the structured data directly instead of having to cope with all the possible variations in its string representation.

Therefore, if you need to make nontrivial changes to an HTML string, it's almost always best to convert your HTML into a true DOM tree, manipulate that using standard DOM methods, then (if necessary) convert it back into a string. Fortunately it doesn't take a lot of code to do so. Here's a simple vanilla JS demo:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var htmlToElement = function(html) {
 var template = document.createElement('template');
 template.innerHTML = html.trim();
 return template.content.firstChild;
};

var elementToHtml = function(el) {
 return el.outerHTML;
}

// Usage demo:
var string = "&lt;div&gt;This &lt;b&gt;is some&lt;/b&gt; &lt;i&gt;html&lt;/i&gt;&lt;img src='http://example.com'&gt;&lt;/div&gt;";

var foo = htmlToElement(string);

// perform your DOM manipulation as needed on foo here. This would look much simpler if I wasn't so stubborn about avoiding jQuery these days, but here we are anyway:
foo.querySelectorAll('img').forEach(function(img) {
 var link = document.createElement('a');
 link.setAttribute('data-fancybox',true);
 link.setAttribute('href', img.getAttribute('src'));
 img.parentNode.insertBefore(link,img);
 link.appendChild(img);
});

// back to a string:
var bar = elementToHtml(foo);
console.log(bar);</code></pre>
</div>
</div>

I want to wrap a HTML tag with another HTML tag in a string (so not a DOM element, a plain string). I created this function but I wonder if I could do it in one go without a forEach loop.

This is the working function:

<pre><code>function style(content) {
 var tempStyledContent = content;

 var imgMatches = tempStyledContent.match(/(&lt;img.*?src=[\"'](.+?)[\"'].*?&gt;)/g);

 imgMatches.forEach(function (imgMatch) {
 var imgTag = imgMatch;
 var imgSrc = imgMatch.match(/src\s*=\s*"(.+?)"/)[1];

 tempStyledContent = tempStyledContent.replace(imgTag,
 "&lt;a href=\"" + imgSrc + "\" data-fancybox&gt;" + imgTag + "&lt;/a&gt;");
 });

 return tempStyledContent;
}
</code></pre>

The parameter <code>content</code> is a string with HTML code in it. The function above outputs the same html as the input but with the (fancybox) a tags surrounding all the child img tags.

So an input string like

<pre><code>"&lt;div&gt;&lt;img src='example.jpg'/&gt;&lt;/div&gt;"
</code></pre>

will output

<pre><code>"&lt;div&gt;&lt;a href='example.jpg' data-fancybox&gt;&lt;img src='example.jpg'/&gt;&lt;/a&gt;&lt;/div&gt;"
</code></pre>

Can anyone improve this? I know too little about regex's to make this better.

wrap HTML tags in plain string with another HTML tag

结构化数据

jQuery

我希望将一个HTML标记与另一个HTML标记包装在一个字符串中(所以不是DOM元素，而是一个普通字符串)。我创建了这个函数，但我想知道我是否可以在没有forEach循环的情况下一次性完成它。这是工作函数：function style(content) {    var tempStyledContent = conte...

问在普通字符串中用另一个HTML标记包装HTML标记
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在普通字符串中用另一个HTML标记包装HTML标记EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在普通字符串中用另一个HTML标记包装HTML标记
EN