Question

有没有办法使用jQuery在锚标记内定位文本的前半部分？

例如，我有这些锚标签。

<a href="">Go to Meeting Center</a> <!-- / target 'Go to' -->
<a href="">Our Departments</a> <!-- / target 'Our' -->

我也想将它们包含在span标签内。

结果应为：

<a href=""><span>Go to</span> Meeting Center</a> <!-- / target 'Go to' -->
<a href=""><span>Our</span> Departments</a> <!-- / target 'Our' -->

它将应用于我网站上的所有锚标签。

Answer 1

你可以这样做：

import threading
import time

brake = 10
k = 5

def printit():
    for x in range(k):
        threading.Timer(brake, long_process, args=('Hello World!',)).start()

def long_process(item):
    print(item)
    #i have a longer process here, it takes a few seconds to run
    #i give more than double of the time needed to run it


printit()

Answer 2

下面的代码循环遍历所有标签，找到你想要的半文本（使用这个answer）然后用这半文本创建跨度并将其放入我为我创建的spans div中跨度。

选中JSFiddle。

<强> HTML

<a href="">Go to Meeting Center</a> <!-- / target 'Go to' -->
<a href="">Our Departments</a> <!-- / target 'Our' -->
<div id="spans"></div>

<强>的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'));
});

Answer 3

你可以试试这个：

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：尚未经过测试，仅用于说明

Answer 4

$("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>

Answer 5

＆＃34;上半场＆＃34;是一个非常主观的术语。

我担心你必须自己编码，
一个非常基本的方法：

＆＃13;

//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);

＆＃13;

Answer 6

你需要根据自己的定义来确定中间位置，但这里有一种方法可以用单词数来检测中间位置。您可以使用此解决方案获得单个单词的范围。

首先需要获取链接中的文本并使用split函数，该函数根据参数中传递的分隔符从字符串创建数组。

然后，您创建一个包含刚刚替换的单词的span元素，并用该跨度替换链接内的文本。

＆＃13;

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);
});

＆＃13;

<a href="">Go to Meeting Center</a> <!-- / target 'Go to' -->
<a href="">Our Departments</a> <!-- / target 'Our' -->
<a href="">Contact</a> <!-- / target 'Contact' -->

＆＃13;

Answer 7

使用以下方法：

$('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>

使用过的功能：
JQuery .each()
String.prototype.split()（将锚文本拆分成块）
Array.prototype.splice()（提取文本的前半部分）
Array.prototype.join()

Answer 8

Check this Fiddle

HTML

<a href="">Go to Meeting Center</a> <!-- / target 'Go to' -->
<a href="">Our Departments</a> <!-- / target 'Our' -->

的jQuery

$(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>"))
  });
});

CSS

a {
  display: block;
}

span {
  color: red !important;
}

注意：

如果您要向下舍入使用floor，请使用ceil。

Answer 9

您可以使用其他答案中提供的一些代码创建一种易于使用的方法，将其应用于网站范围内的所有链接

（参见摘录）

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>

使用jQuery选择锚标记内的文本的前半部分

9 个答案:

HTML

的jQuery

CSS