如何在没有标签的 HTML 中选择文本
Posted
技术标签:
【中文标题】如何在没有标签的 HTML 中选择文本【英文标题】:How to select a text in HTML without a tag 【发布时间】:2020-06-17 08:07:45 【问题描述】:我目前正在使用 Wordpress 插件处理捐赠表格,但我完全被一个问题所困扰。 该插件会自动在价格选项中添加一些我不想要的单词和字符。
我希望选项为“€ 5”“€ 10”“€ 15”“自己的选项”。
选项的 html 当前如下所示:
<li>
<label>
<input type="radio" onchange="mollie_forms_recurring_methods_624();mollie_forms_624_totals();" data-frequency="months" data-freq="iedere maanden" data-pricetype="fixed" data-price="10.00" data-vat="" name="rfmp_priceoptions_624" value="1">
/ (€ 10,00 iedere maanden)
</label>
</li>
如您所见,它在价格之外添加了“iedere maanden”和“( )”等词。我已经找到了一个删除或替换这些词的 javascript 代码,但它也删除了标签内的 Radio 输入,该输入需要保留以使捐赠表格能够正常工作。
我用来替换单词的Jquery代码,但也删除了输入:
$('.donate-box ul li label:not(input)').text(function(i,t)
return t.replace("iedere maanden", " ");
);
我不能真正编辑插件的 HTML,因为它会在插件更新时被重置。
如何只选择标签内的文本/单词而不删除/编辑输入字段?
提前致谢!
【问题讨论】:
【参考方案1】:您遇到的问题是您需要修改节点,而不是元素对象的文本内容。
要实现这一点,您需要遍历每个label
并获取它的contents()
。给定您的 HTML 结构,您可以获取内容中的最后一个节点,并使用正则表达式删除与您要显示的价格无关的任何字符。试试这个:
$('li label').each(function()
var node = $(this).contents().last()[0];
node.textContent = node.textContent.replace(/[^€\d\,]/g, '');
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<label>
<input type="radio" onchange="mollie_forms_recurring_methods_624();mollie_forms_624_totals();" data-frequency="months" data-freq="iedere maanden" data-pricetype="fixed" data-price="10.00" data-vat="" name="rfmp_priceoptions_624" value="1">
/ (€ 5,00 iedere maanden)
</label>
</li>
<li>
<label>
<input type="radio" onchange="mollie_forms_recurring_methods_624();mollie_forms_624_totals();" data-frequency="months" data-freq="iedere maanden" data-pricetype="fixed" data-price="10.00" data-vat="" name="rfmp_priceoptions_624" value="1">
/ (€ 10,00 iedere maanden)
</label>
</li>
<li>
<label>
<input type="radio" onchange="mollie_forms_recurring_methods_624();mollie_forms_624_totals();" data-frequency="months" data-freq="iedere maanden" data-pricetype="fixed" data-price="10.00" data-vat="" name="rfmp_priceoptions_624" value="1">
/ (€ 250,00 iedere maanden)
</label>
</li>
</ul>
【讨论】:
【参考方案2】:您可以更具体地使用要替换的字符串以避免与单选项目中的内容混淆 用 replace("iedere maanden)", " ")
【讨论】:
以上是关于如何在没有标签的 HTML 中选择文本的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Javascript 获取选定文本中的所有 HTML 选择标签?
如何在文本区域标签中的特定光标位置插入选择标签下拉值作为文本片段?