[英]Select first half of text inside anchor tag using jQuery
Is there a way to target the first half of the text inside an anchor tag using jQuery? 有没有一种方法可以使用jQuery定位锚标记中文本的前半部分?
For example, I have these anchor tags. 例如,我有这些锚标记。
<a href="">Go to Meeting Center</a> <!-- / target 'Go to' -->
<a href="">Our Departments</a> <!-- / target 'Our' -->
I'd also like to wrap them inside a span tag. 我也想将它们包装在span标签内。
The result should be: 结果应为:
<a href=""><span>Go to</span> Meeting Center</a> <!-- / target 'Go to' -->
<a href=""><span>Our</span> Departments</a> <!-- / target 'Our' -->
It will be applied to all my anchor tags on my website. 它将应用于我网站上的所有锚标签。
You could do this: 您可以这样做:
var text = $("a").text().split(" ");
var half_of_text = text.splice(0, Math.floor(text.length/2)).join(" ");
The code below loops through all a tags, finds the half text you want (using this answer ) and then creates the span with this half text and puts it in the spans
div I created for the spans. 下面的代码循环遍历所有标签,找到所需的半文本(使用此答案 ),然后使用该半文本创建跨度,并将其放入为
spans
创建的spans
div中。
Check this JSFiddle . 检查此JSFiddle 。
HTML 的HTML
<a href="">Go to Meeting Center</a> <!-- / target 'Go to' -->
<a href="">Our Departments</a> <!-- / target 'Our' -->
<div id="spans"></div>
JavaScript/JQuery JavaScript / jQuery
$('a').each(function(i, ele) {
text = $(this).text().split(" ");
half_of_text = text.splice(0, Math.floor(text.length/2)).join(" ");
span = $(document.createElement('span'));
span.html(half_of_text);
$('#spans').append(span);
$('#spans').append(document.createElement('br'));
});
You can try this: 您可以尝试以下方法:
var t = $('a').text();
var middle= '';
for(var i =0; i<Math.floor(t.length/2);i++){
middle+=t.char(i);
}
console.log(middle);
PS: This has not been tested and is done only to illustrate PS:这未经测试,仅是为了说明
$("a").each(function(){ console.log($(this).text().substr( 0 ,$(this).text().length/2)); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <a href="">Go to Meeting Center</a> <a href="">Our Departments</a>
"First half" is a very subjective term. “上半年”是一个非常主观的术语。
I fear you will have to code this by yourself, 我担心您将不得不自己编写代码,
a very basic approach : 一个非常基本的方法:
//assuming this is your query string var text = "Go to Meeting Center"; //split string into an array var terms = text.split(" "); //looking for an approximate value the center of the text var half = Math.ceil(terms.length/2); //first "half" of query var selected = terms.splice(0, half).join(" "); console.log(selected);
You need to decide where is the middle by your own definition, but here is a way to detect the middle with the number of words. 您需要根据自己的定义来确定中间位置,但这是一种通过单词数检测中间位置的方法。 You'd get a span around a single word as well with this solution.
通过此解决方案,您还将获得一个单词的跨度。
You first need to get the text inside the link and use the split
function which creates an array from a string according to the separator passed in the argument. 首先,您需要获取链接内的文本,并使用
split
函数,该函数根据在参数中传递的分隔符从字符串创建数组。
Then, you create a span element containing those words you just replaced and you replace the text inside the link with that span. 然后,创建一个span元素,其中包含刚替换的单词,然后用该span替换链接内的文本。
var links = document.querySelectorAll('a'); [].forEach.call(links, function(link_el){ var text_inside = link_el.innerText; var words = text_inside.split(' '); var words_half = Math.ceil(words.length/2); var span_element = document.createElement('span'); var words_string = words.splice(0, words_half).join(' '); link_el.innerText = link_el.innerText.replace(words_string, ''); span_element.innerText = words_string; link_el.prepend(span_element); });
<a href="">Go to Meeting Center</a> <!-- / target 'Go to' --> <a href="">Our Departments</a> <!-- / target 'Our' --> <a href="">Contact</a> <!-- / target 'Contact' -->
Use the following approach: 使用以下方法:
$('a').each(function(i, el){ var parts = $(el).text().split(' '); // splitting anchor text into chunks $(el).html("<span>"+ parts.splice(0, Math.ceil(parts.length/2)).join(" ") +"</span> " + parts.join(" ")); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="">Go to Meeting Center</a> <!-- / target 'Go to' --> <a href="">Our Departments</a>
Used functions: 使用的功能:
JQuery .each() jQuery .each()
String.prototype.split() (to split anchor text into chunks) String.prototype.split() (用于将锚文本拆分为大块)
Array.prototype.splice() (to extract the first half of the text ) Array.prototype.splice() (提取文本的前半部分 )
Array.prototype.join() Array.prototype.join()
<a href="">Go to Meeting Center</a> <!-- / target 'Go to' -->
<a href="">Our Departments</a> <!-- / target 'Our' -->
$(document).ready(function() {
$.each($("a"), function(index, element) {
var text = $(element).text().split(" ");
text = text.splice(0, Math.floor(text.length/2)).join(" ");
$(element).html($(element).text().replace(text, "<span>" + text + "</span>"))
});
});
a {
display: block;
}
span {
color: red !important;
}
NOTE:
注意:
If you want to round down use
floor
, otherwise useceil
.如果你想回合下来使用的
floor
,否则使用ceil
。
You can use some of the code provided in other answers to create an easy-to-use approach for applying this to all links site-wide 您可以使用其他答案中提供的一些代码来创建易于使用的方法,以将其应用于站点范围内的所有链接
(see snippet) (请参见代码段)
function get_first_half(element) { var text = $(element).text().split(" "); var half_of_text = text.splice(0, Math.floor(text.length / 2)).join(" "); return half_of_text; } function get_back_half(element) { var text = $(element).text().split(" "); var half_of_text = text.slice(Math.floor(text.length / 2), Math.floor(text.length)).join(" "); return half_of_text; } $(document).ready(function() { $("a").each(function(elem) { var first_half = get_first_half(this); var back_half = get_back_half(this); $(this).html("<span>" + first_half + "</span>" + back_half); }); });
span { font-size: 2.0em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="">Goto Meeting</a> <br> <a href="">Our Departments</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.