jQuery - 如何将字符串中的每个字符包装在跨度中

2023-11-30

如何将div的字符转换为span?

例如,我想转换这个:

<div>
    Hello World
</div>

进入这个:

<div>
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
    <span>W</span>
    <span>o</span>
    <span>r</span>
    <span>l</span>
    <span>d</span>
</div>

我试过了这个 StackOverflow 建议,但这会将空格转换为跨度。我需要的只是将字符转换为跨度:

$("div").each(function (index) {
    var characters = $(this).text().split("");

    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
        $this.append("<span>" + el + "</span");
    });
 });

您可以使用String#replace方法和html()带回调的方法可以减少代码。

$("div").html(function(index, html) {
  return html.replace(/\S/g, '<span>$&</span>');
});

$("div").html(function(index, html) {
  return html.replace(/\S/g, '<span>$&</span>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Hello World
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery - 如何将字符串中的每个字符包装在跨度中 的相关文章

  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 使用 JQuery 更改元素的顺序

    有人知道我做错了什么吗 我正在尝试更改某些图像的显示顺序 我希望每次按下按钮时图像都会向右 向左移动一个位置 这是我尝试过的 但没有运气 任何帮助或见解将不胜感激 rightShift click function img hide var
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 长轮询会冻结浏览器并阻止其他 ajax 请求

    我正在尝试在我的中实现长轮询Spring MVC Web 应用程序 http static springsource org spring docs 2 0 x reference mvc html但在 4 5 个连续 AJAX 请求后它会
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • 在 ASP.NET Core MVC 中访问从视图到控制器的隐藏值

    我需要帮助使用 jQuery 从 ASP NET Core razor 视图页面传递隐藏控件值 jQuery 用于获取动态控件选定的值 section scripts
  • Javascript/Jquery:确定用户是否使用鼠标滚轮、滚动条或键盘滚动

    我正在尝试让用户界面正常工作 如果他们使用鼠标滚轮 我需要让它以一种方式滚动 如果他们使用滚动条 我需要让它以另一种方式滚动 如果他们使用键盘 我需要让它以另一种方式滚动 我相信滚轮和滚动条都充当鼠标事件 但是当单击滚动条时我无法让 jav
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp

随机推荐

  • 使用 post/sendmessage 进行鼠标点击不起作用[重复]

    这个问题在这里已经有答案了 可能的重复 如何在C 中模拟鼠标点击 我努力了 Window FindWindow null untitled Paint PostMessage WindowToFind WM MOUSEMOVE 0 loca
  • 组合框的默认值

    您好 我尝试为组合框设置默认值 XAML
  • 检查范围内的 int

    java中是否有一种优雅的方法来检查int是否等于某个值 或者是否比某个值大 小1 例如 如果我检查x在身边5 我想返回 true4 5 and 6 因为 4 和 6 与 5 只相差一 有内置函数可以做到这一点吗 或者我这样写会更好吗 in
  • 如何使用 Jquery 为文件上传中选择的多个图像提供预览?

    大家好 我有一个 fileuplaod 用户可以在其中选择多个图像 我想在上传之前显示这些所选图像的预览 目前我将其管理为单个图像预览 我如何为所选的多个图像提供预览 function readURL input var img input
  • 使用 JavaFX 2.2 助记符(和加速器)

    我正在尝试让 JavaFX 助记符发挥作用 我在场景中有一些按钮 我想要实现的是通过按 Ctrl S 来触发此按钮事件 这是一个代码骨架 FXML public Button btnFirst btnFirst getScene addMn
  • MVC6 TagHelpers 一次性

    在较旧的 MVC HTML 帮助程序中 可以使用IDisposable包装内容 例如BeginForm助手会自动换行 stuff 有结束语form tag stuff MVC6 TagHelpers 支持这种内容包装吗 例如我想要这个
  • 如何将 Bundle 从 Fragment 传递到 Fragment

    我在我的应用程序中使用片段 这是我的第一个片段 它只是简单地膨胀了 xml 文件 public class FragmentA extends SherlockFragment Context myContext appContext Ov
  • 如何在谷歌应用程序引擎模板上获取cookie值

    我正在开发一个应用程序来了解 python 和 Google App Engine 我想从 cookie 中获取值并在模板上打印以隐藏或显示某些内容 是否可以 哪种会话系统最适合与谷歌应用程序引擎一起使用 在 gae 和模板上使用会话的最佳
  • Angular4中的浏览器关闭事件

    我如何检测角度 4 0 2 中的浏览器关闭事件 我努力了 HostListener window unload event unloadHandler event HostListener window beforeunload event
  • std::thread 构造函数如何检测右值引用?

    显然可以将右值引用传递给std thread构造函数 我的问题是这个构造函数的定义参考参数 它说这个构造函数 template lt class Function class Args gt explicit thread Function
  • 如何在python中将对象数组转换为普通数组

    我有一个看起来像这样的对象数组 array array 2 4567 dtype object array 3 4567 dtype object array 4 4567 dtype object array 5 4567 dtype o
  • Java 应用程序挂在 in.hasNext(); 上

    我正在开发通过套接字进行通信的战舰摇摆应用程序 private ServerSocket server private Socket connection private PrintWriter out private Scanner in
  • 如何在资源管理器的重命名事件中挂钩 C++

    我不能比我的标题更清楚了 P 我想每当用户在 Windows 资源管理器中重命名文件时 并且仅在资源管理器中 运行我的程序 这是一个简单的模型 一个简单的教程链接将会非常有帮助 我什么也没找到 先感谢您 附 我是 C 新手 看来 Windo
  • Room 无法验证数据完整性

    我在使用房间数据库运行程序时收到此错误 Room cannot verify the data integrity Looks like you ve changed schema but forgot to update the vers
  • 使用 iOS 获取 Facebook 新闻源?

    我从适用于 iOS 的 Facebook SDK 开始 在我的应用程序中 我尝试获取用户新闻源并将其加载到 uitableview 中 事实证明这很棘手 我也找不到任何有关它的文档 使用 Facebook SDK 您可以使用以下方式调用 F
  • 使用 App 目录和 next-intl 翻译 Next.js 13 中的 URL

    我目前正在开发多语言 Next js 13 应用程序 并使用 next intl 包进行国际化 我一直在尝试为我的路线设置翻译后的网址 但遇到了一些问题 这是我想要实现的目标的一个例子 如果源语言是丹麦语 则路径可以是 mypage om
  • 使用自定义域部署到 Heroku [关闭]

    Closed 这个问题是无关 目前不接受答案 我已经从 My app heroku com 运行该应用程序并且它可以工作 并且我已经在我的域之间设置了 DNS 但是每当我从我指定的域打开我的应用程序时 heroku 会说 请参阅文档 如果您
  • 为基于 create-react-app 的项目运行 npm build 后在运行时读取环境变量

    我是 React 新手 我将部署一个 React 项目 React项目由create react app创建 然后生产代码由 npm build 构建 并由Express托管 在项目中 有一些对 API 服务器的 fetch 调用 其中的
  • Spark 闭包参数绑定

    我正在 Scala 中使用 Apache Spark 我在尝试使用第二个 RDD 中的数据操作一个 RDD 时遇到问题 我试图将第二个 RDD 作为参数传递给针对第一个 RDD 进行 映射 的函数 但似乎在该函数上创建的闭包绑定了该值的未初
  • jQuery - 如何将字符串中的每个字符包装在跨度中

    如何将div的字符转换为span 例如 我想转换这个 div Hello World div 进入这个 div span H span span e span span l span span l span span o span span