javascript - 使用编辑器的简码在网站上创建大型工具提示词汇表？jQuery 是正确的解决方案吗？

Question

在一个基于 wordpress 的业余爱好网站上工作。所说的爱好有一个很大的（几百个）术语，这些术语可能会在页面中出现很多次，其中包含用户可能想要调用的某些信息，所以我实现了tooltipster的插件来显示悬停时的工具提示。

然而，这个想法是最终扩展网站，以便其他非开发人员可以添加内容；我想要一种用户友好的方式，让他们能够在编写时插入工具提示。

现在，工具提示只是在这样的段落中：

<p>This is my paragraph with a certain <span class="tooltip" data-tooltip-content="#Three_Word_Term">Three Word Term</span> in it. When it's hovered the tooltip displays. </p>

理想情况下，我会使用某种简单的简码，这样他们就可以用 {!Three Word Term} 写一个句子。这就是他们最终必须要做的。

所以我试图想出一种方法，基本上可以抓取 {!Text String} 并将其替换为跨度和类信息，再加上一个与它拾取 ID="Text_String" 的文本字符串匹配的 ID。具体来说，我试图避免定义每个术语及其将被替换的内容，但让它自动从 {!*} （或类似的东西）之间获取术语并在替换位中重用它。

我认为这是可以用 jQuery 完成的吗？我知道我可以找到和替换，我只是不知道我是否可以在某些标记之间“找到”文本，然后在替换中重用它。

也不知道 jQuery 是否是最好/最干净的解决方案？我绝对是一个初学者，只是边走边自学，所以非常感谢您的手握和输入。

标签： javascriptphpjquerywordpresstooltip

Answer 1

如果我理解您的要求...您希望用户输入文本，例如：

<p id="myP">This is my paragraph with a certain {!Three Word Term} in it. When it's hovered the tooltip displays.</p>

然后保存时，将文本替换为

<p id="myP">This is my paragraph with a certain <span class="tooltip" data-tooltip-content="#Three_Word_Term">Three Word Term</span> in it. When it's hovered the tooltip displays. </p>

我添加了 id 并假设您有某种方式来获取这个特定的段落元素（我将只使用 id）。您可以使用 jQuery 获取段落中输入的文本var enteredText = $("#myP").html();

如果您尝试匹配输入的模式并替换它们，您可能想了解一些关于 JavaScript“正则表达式”的知识。它们很困难（尤其是对于 JavaScript 新手来说），但对于这样的事情非常有用。这是一个正则表达式，您可以使用它来查找给定文本中包含大写字母、小写字母或由 {! 和 }

var myRegex = /\{!([A-Z\s]+)\}/gi;

是的，这很混乱，但弄清楚这个正则表达式可能是最难的部分。现在您可以使用.match来查看输入的文本中是否存在此模式中的某些内容：

var foundText = "";

if( enteredText.match( myRegex ) != null)
  foundText = enteredText.match( myRegex )[0];

如果上面的模式匹配，现在您可以使用一些字符串方法来处理找到的术语。

var textToReplaceEnteredText = "";

// ... do some stuff with the foundText and enteredText strings above
// ... use those to build the textToReplaceEnteredText string
// ... I'll let you work this out. You may want to use the .replace method of strings

// Finally, use jQuery's .html method again, to replace the paragraph's HTML text
$("#myP").html( textToReplaceEnteredText );