JS自动转换带有特定标记的括号中的文本，包括匹配
JS to automatically convert text in parentheses with specific markup including match
在页面加载时，我想找到正文中封装在括号中的所有文本（这是一个示例）并将其替换为以下内容：
<sup><i class="fa fa-lightbulb-o tooltip" title="here's an example"></i></sup>
我没有元素的 ID。页面中可能有零个或多个实例。括号内的文本将成为 .文字可能有引号。
我想这就是您要找的。使用正则表达式查找和替换“((”和“))”。鉴于此内容：
<div id="content">without my having to actually DO anything special with the content? I could get in the habit of doubling up on the parenthesis if that helps ((like this would be a tooltip)) but (this would not).</div>
此代码将搜索它并替换为您的图标。
var target = document.getElementById('content'),
str = target.innerHTML,
pre = '<sup><i class="fa fa-lightbulb-o tooltip" title="',
post = '"></i></sup>';
str = str.replace(/\(\(/g, pre).replace(/\)\)/g, post);
target.innerHTML = str;
这是一个 jsfiddle：
https://jsfiddle.net/mckinleymedia/fzn4trmL/
title 属性没有很大的灵活性，这会出现问题。你最好只用图标包围文本，像这样：
<i class="fa fa-lightbulb-o tooltip">like this would be a tooltip</i>
但是您需要让工具提示在图标中显示 html 而不是标题。
Upon page loading, I want to find all text in the body that is
encapsulated in parentheses.. and replace it...
您可以使用正则表达式查找模式之间的文本并替换它。
例如：
text.replace(
/(\{)(.*?)(\})/gi,
'<sup><i class="fa fa-lightbulb-o tooltip" title=""></i></sup>'
);
其中，第一组匹配左大括号 {，最后一组匹配右大括号 }，第二组匹配零个或多个任意字符，即中间的所有文本。从这些匹配的组中，我们然后通过替换中的 </code> 占位符替换第二组。</p>
<blockquote>
<p>I don't have the element's ID. There could be zero or more instances
in a page.</p>
</blockquote>
<p>如果您知道包含此类文本的所有元素都是相同的元素，请使用 <code>getElementsByTagName 获取所有此类元素。如果没有，那么如果您可以为所有这些元素提供一个通用的 class 会更好，然后您可以使用 getElementsByClassName 或 querySelectorAll.
作为目标
例如：
var p = document.getElementsByTagName('p');
[].forEach.call(p, function(elem) {
// do the replacement here
});
The text inside the parentheses would then become the title of the .
The text may have quotation marks
只需在替换字符串中替换 i 标记的 title 属性中的所需文本。更好的是，使用 data-title 属性，这样您就可以使用 CSS 或任何其他 Javascript 库来随时显示漂亮的弹出工具提示。
对于引号，对属性值使用双引号，对文本中的撇号使用单引号。这将不需要您付出额外的努力。
Fiddle: http://jsfiddle.net/abhitalks/LL4seepp/
片段：
var p = document.getElementsByTagName('p'),
text, converted;
[].forEach.call(p, function(elem) {
var original = elem.innerHTML, replaced;
replaced = original.replace(/(\{)(.*?)(\})/gi,
'<sup><i class="fa fa-lightbulb-o tooltip" data-title=""></i></sup>'
);
elem.innerHTML = replaced;
});
i.tooltip {
display: inline-block; position: relative;
width: 0.75em; height: 0.75em; border-radius: 50%;
background-color: #c33; cursor: help;
font-size: 1.1em;
}
i.tooltip::after {
content: attr(data-title);
position: absolute; z-index: 100;
top: -200%; left: 120%; opacity: 0;
padding: 0px; text-align: center;
width: 0; height: 0; overflow: hidden;
background-color: #edb; border: 0px solid #666;
transition: all 250ms 250ms ease;
}
i.tooltip:hover::after {
display: block; padding: 4px;
width: 128px; height: 1em; opacity: 1;
border: 1px solid #333;
transform: translateY(50%);
}
<p>
I want to write the way I write, but not force it down my readers throats. I often have side thoughts {like this} which I always put inside parenthesis {like so}.
But I don't want to change the way I write. So I wondered... is it possible to take anything I write in parenthesis {here's an example} and re-write it.
</p>
<p>
I want to write the way I write, but not force it down my readers throats. I often have side thoughts {like this with 'quotes'} which I always put inside parenthesis {like so}.
But I don't want to change the way I write. So I wondered... is it possible to take anything I write in parenthesis {here's an example} and re-write it.
</p>
我喜欢这个问题！
我的方法是遍历文档的段落，首先将所有带双括号的旁注收集到一个数组中。
这样，您随后可以将边注显示（或重新显示）为上标，或作为脚注 或作为尾注（等）
// Initialise variables
var paragraphsNodeList = document.getElementsByTagName('p');
var paragraphText = [];
var text = '';
// Collect all paragraphs in the document into one long text string
for (var p = 0; p < paragraphsNodeList.length; p++) {
text += paragraphsNodeList[p].innerHTML;
text += ' ';
}
// Harvest the tooltips from the long text string, collect them into an array, tidy them up
var tooltips = text.match(/\(\([^\)]+\)\)/g);
for (var t = 0; t < tooltips.length; t++) {
tooltips[t] = tooltips[t].replace("((", "");
tooltips[t] = tooltips[t].replace("))", "");
}
// Loop through each paragraph, replacing each side-comment with a superscript element
for (var p = 0; p < paragraphsNodeList.length; p++) {
paragraphText[p] = paragraphsNodeList[p].innerHTML;
paragraphText[p] = paragraphText[p].replace(/\(\([^\)]+\)\)/g, ('<sup></sup>'));
paragraphsNodeList[p].innerHTML = paragraphText[p];
}
// Loop through all the superscript elements, adding the relevant markup and tooltip
var supNodeList = document.getElementsByTagName('sup');
for (var s = 0; s < supNodeList.length; s++) {
supNodeList[s].innerHTML = ('<i class="fa fa-lightbulb-o tooltip" title="' + tooltips[s] + '">' + (s + 1) + '</i>');
}
h2 {
margin: 24px 0 4px;
font-size: 14px;
text-transform: uppercase;
}
h2:nth-of-type(1) {
margin-top: 12px;
}
div, p {margin-bottom: 12px;}
h2 + div, h2 + p {
margin-top:0;
}
<h2>Before</h2>
<div>I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).</div>
<div>It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).</div>
<h2>After</h2>
<p>I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).</p>
<p>It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).</p>
=====
改进版本，工具提示更美观
// Initialise variables
var paragraphsNodeList = document.getElementsByTagName('p');
var paragraphText = [];
var text = '';
// Collect all paragraphs in the document into one long text string
for (var p = 0; p < paragraphsNodeList.length; p++) {
text += paragraphsNodeList[p].innerHTML;
text += ' ';
}
// Harvest the tooltips from the long text string, collect them into an array, tidy them up
var tooltips = text.match(/\(\([^\)]+\)\)/g);
for (var t = 0; t < tooltips.length; t++) {
tooltips[t] = tooltips[t].replace("((", "[...] ");
tooltips[t] = tooltips[t].replace("))", " [...]");
}
// Loop through each paragraph, replacing each side-comment with a superscript element
for (var p = 0; p < paragraphsNodeList.length; p++) {
paragraphText[p] = paragraphsNodeList[p].innerHTML;
paragraphText[p] = paragraphText[p].replace(/\(\([^\)]+\)\)/g, ('<sup></sup>'));
paragraphsNodeList[p].innerHTML = paragraphText[p];
}
// Loop through all the superscript elements, adding the relevant markup and tooltip
var supNodeList = document.getElementsByTagName('sup');
for (var s = 0; s < supNodeList.length; s++) {
supNodeList[s].innerHTML = ('<i class="fa fa-lightbulb-o tooltip">' + (s + 1) + '</i><i class="fa fa-lightbulb-o tooltip">' + (s + 1) + '. ' + tooltips[s] + '</i>');
}
body {
max-width: 720px;
}
h2 {
margin: 24px 0 4px;
font-size: 14px;
text-transform: uppercase;
}
h2:nth-of-type(1) {
margin-top: 12px;
}
div, p {
font-size: 16px;
line-height: 24px;
margin-bottom: 12px;
}
h2 + div, h2 + p {
margin-top:0;
}
sup i {
position: relative;
top: -4px;
vertical-align: top;
display: inline-block;
padding: 1px;
border: 1px solid rgba(127,0,0,1);
background: rgba(255,255,127,1);
width: auto;
height: auto;
font-style: normal;
font-weight: bold;
font-size: 8px;
}
sup i:nth-of-type(even) {
display: none;
opacity: 0;
}
sup:hover i:nth-of-type(odd) {
display: none;
}
sup:hover i:nth-of-type(even) {
z-index: 12;
display: inline-block;
opacity: 0;
width: 180px;
padding: 4px;
margin-right: -182px;
margin-bottom: -100%;
font-weight: normal;
font-style: italic;
font-size: 13px;
transition: all 0.75s ease-in;
}
sup:hover i:nth-of-type(even):hover {
opacity: 1;
}
<h2>Before</h2>
<div>I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).</div>
<div>It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).</div>
<h2>After</h2>
<p>I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).</p>
<p>It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).</p>
在页面加载时，我想找到正文中封装在括号中的所有文本（这是一个示例）并将其替换为以下内容：
<sup><i class="fa fa-lightbulb-o tooltip" title="here's an example"></i></sup>
我没有元素的 ID。页面中可能有零个或多个实例。括号内的文本将成为 .文字可能有引号。
我想这就是您要找的。使用正则表达式查找和替换“((”和“))”。鉴于此内容：
<div id="content">without my having to actually DO anything special with the content? I could get in the habit of doubling up on the parenthesis if that helps ((like this would be a tooltip)) but (this would not).</div>
此代码将搜索它并替换为您的图标。
var target = document.getElementById('content'),
str = target.innerHTML,
pre = '<sup><i class="fa fa-lightbulb-o tooltip" title="',
post = '"></i></sup>';
str = str.replace(/\(\(/g, pre).replace(/\)\)/g, post);
target.innerHTML = str;
这是一个 jsfiddle： https://jsfiddle.net/mckinleymedia/fzn4trmL/
title 属性没有很大的灵活性，这会出现问题。你最好只用图标包围文本，像这样：
<i class="fa fa-lightbulb-o tooltip">like this would be a tooltip</i>
但是您需要让工具提示在图标中显示 html 而不是标题。
Upon page loading, I want to find all text in the body that is encapsulated in parentheses.. and replace it...
您可以使用正则表达式查找模式之间的文本并替换它。
例如：
text.replace(
/(\{)(.*?)(\})/gi,
'<sup><i class="fa fa-lightbulb-o tooltip" title=""></i></sup>'
);
其中，第一组匹配左大括号 {，最后一组匹配右大括号 }，第二组匹配零个或多个任意字符，即中间的所有文本。从这些匹配的组中，我们然后通过替换中的 </code> 占位符替换第二组。</p>
<blockquote>
<p>I don't have the element's ID. There could be zero or more instances
in a page.</p>
</blockquote>
<p>如果您知道包含此类文本的所有元素都是相同的元素，请使用 <code>getElementsByTagName 获取所有此类元素。如果没有，那么如果您可以为所有这些元素提供一个通用的 class 会更好，然后您可以使用 getElementsByClassName 或 querySelectorAll.
例如：
var p = document.getElementsByTagName('p');
[].forEach.call(p, function(elem) {
// do the replacement here
});
The text inside the parentheses would then become the title of the . The text may have quotation marks
只需在替换字符串中替换 i 标记的 title 属性中的所需文本。更好的是，使用 data-title 属性，这样您就可以使用 CSS 或任何其他 Javascript 库来随时显示漂亮的弹出工具提示。
对于引号，对属性值使用双引号，对文本中的撇号使用单引号。这将不需要您付出额外的努力。
Fiddle: http://jsfiddle.net/abhitalks/LL4seepp/
片段：
var p = document.getElementsByTagName('p'),
text, converted;
[].forEach.call(p, function(elem) {
var original = elem.innerHTML, replaced;
replaced = original.replace(/(\{)(.*?)(\})/gi,
'<sup><i class="fa fa-lightbulb-o tooltip" data-title=""></i></sup>'
);
elem.innerHTML = replaced;
});
i.tooltip {
display: inline-block; position: relative;
width: 0.75em; height: 0.75em; border-radius: 50%;
background-color: #c33; cursor: help;
font-size: 1.1em;
}
i.tooltip::after {
content: attr(data-title);
position: absolute; z-index: 100;
top: -200%; left: 120%; opacity: 0;
padding: 0px; text-align: center;
width: 0; height: 0; overflow: hidden;
background-color: #edb; border: 0px solid #666;
transition: all 250ms 250ms ease;
}
i.tooltip:hover::after {
display: block; padding: 4px;
width: 128px; height: 1em; opacity: 1;
border: 1px solid #333;
transform: translateY(50%);
}
<p>
I want to write the way I write, but not force it down my readers throats. I often have side thoughts {like this} which I always put inside parenthesis {like so}.
But I don't want to change the way I write. So I wondered... is it possible to take anything I write in parenthesis {here's an example} and re-write it.
</p>
<p>
I want to write the way I write, but not force it down my readers throats. I often have side thoughts {like this with 'quotes'} which I always put inside parenthesis {like so}.
But I don't want to change the way I write. So I wondered... is it possible to take anything I write in parenthesis {here's an example} and re-write it.
</p>
我喜欢这个问题！
我的方法是遍历文档的段落，首先将所有带双括号的旁注收集到一个数组中。
这样，您随后可以将边注显示（或重新显示）为上标，或作为脚注 或作为尾注（等）
// Initialise variables
var paragraphsNodeList = document.getElementsByTagName('p');
var paragraphText = [];
var text = '';
// Collect all paragraphs in the document into one long text string
for (var p = 0; p < paragraphsNodeList.length; p++) {
text += paragraphsNodeList[p].innerHTML;
text += ' ';
}
// Harvest the tooltips from the long text string, collect them into an array, tidy them up
var tooltips = text.match(/\(\([^\)]+\)\)/g);
for (var t = 0; t < tooltips.length; t++) {
tooltips[t] = tooltips[t].replace("((", "");
tooltips[t] = tooltips[t].replace("))", "");
}
// Loop through each paragraph, replacing each side-comment with a superscript element
for (var p = 0; p < paragraphsNodeList.length; p++) {
paragraphText[p] = paragraphsNodeList[p].innerHTML;
paragraphText[p] = paragraphText[p].replace(/\(\([^\)]+\)\)/g, ('<sup></sup>'));
paragraphsNodeList[p].innerHTML = paragraphText[p];
}
// Loop through all the superscript elements, adding the relevant markup and tooltip
var supNodeList = document.getElementsByTagName('sup');
for (var s = 0; s < supNodeList.length; s++) {
supNodeList[s].innerHTML = ('<i class="fa fa-lightbulb-o tooltip" title="' + tooltips[s] + '">' + (s + 1) + '</i>');
}
h2 {
margin: 24px 0 4px;
font-size: 14px;
text-transform: uppercase;
}
h2:nth-of-type(1) {
margin-top: 12px;
}
div, p {margin-bottom: 12px;}
h2 + div, h2 + p {
margin-top:0;
}
<h2>Before</h2>
<div>I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).</div>
<div>It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).</div>
<h2>After</h2>
<p>I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).</p>
<p>It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).</p>
=====
改进版本，工具提示更美观
// Initialise variables
var paragraphsNodeList = document.getElementsByTagName('p');
var paragraphText = [];
var text = '';
// Collect all paragraphs in the document into one long text string
for (var p = 0; p < paragraphsNodeList.length; p++) {
text += paragraphsNodeList[p].innerHTML;
text += ' ';
}
// Harvest the tooltips from the long text string, collect them into an array, tidy them up
var tooltips = text.match(/\(\([^\)]+\)\)/g);
for (var t = 0; t < tooltips.length; t++) {
tooltips[t] = tooltips[t].replace("((", "[...] ");
tooltips[t] = tooltips[t].replace("))", " [...]");
}
// Loop through each paragraph, replacing each side-comment with a superscript element
for (var p = 0; p < paragraphsNodeList.length; p++) {
paragraphText[p] = paragraphsNodeList[p].innerHTML;
paragraphText[p] = paragraphText[p].replace(/\(\([^\)]+\)\)/g, ('<sup></sup>'));
paragraphsNodeList[p].innerHTML = paragraphText[p];
}
// Loop through all the superscript elements, adding the relevant markup and tooltip
var supNodeList = document.getElementsByTagName('sup');
for (var s = 0; s < supNodeList.length; s++) {
supNodeList[s].innerHTML = ('<i class="fa fa-lightbulb-o tooltip">' + (s + 1) + '</i><i class="fa fa-lightbulb-o tooltip">' + (s + 1) + '. ' + tooltips[s] + '</i>');
}
body {
max-width: 720px;
}
h2 {
margin: 24px 0 4px;
font-size: 14px;
text-transform: uppercase;
}
h2:nth-of-type(1) {
margin-top: 12px;
}
div, p {
font-size: 16px;
line-height: 24px;
margin-bottom: 12px;
}
h2 + div, h2 + p {
margin-top:0;
}
sup i {
position: relative;
top: -4px;
vertical-align: top;
display: inline-block;
padding: 1px;
border: 1px solid rgba(127,0,0,1);
background: rgba(255,255,127,1);
width: auto;
height: auto;
font-style: normal;
font-weight: bold;
font-size: 8px;
}
sup i:nth-of-type(even) {
display: none;
opacity: 0;
}
sup:hover i:nth-of-type(odd) {
display: none;
}
sup:hover i:nth-of-type(even) {
z-index: 12;
display: inline-block;
opacity: 0;
width: 180px;
padding: 4px;
margin-right: -182px;
margin-bottom: -100%;
font-weight: normal;
font-style: italic;
font-size: 13px;
transition: all 0.75s ease-in;
}
sup:hover i:nth-of-type(even):hover {
opacity: 1;
}
<h2>Before</h2>
<div>I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).</div>
<div>It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).</div>
<h2>After</h2>
<p>I was idly wondering the other day ((I tend to do this a lot)) about whether it might be possible ((practically, rather than theoretically)) to convert all my own interjections and clarifications into super-scripted tool-tips for the purposes of abbreviating any hypertext that I write ((since we all know that people approach reading on-screen hypertext in a different manner from long-form print articles and in the former case, a tendency towards brevity and / or conciseness tends, generally, to be the preferable option)).</p>
<p>It is my intention ((as stated above)) to convert all my musings into ((initially invisible)) tooltips via javascript ((assuming that this is actually possible)).</p>