如何在页面加载前加载jQuery并替换指定input值（替代鼠标悬停触发）

1. 如何在页面加载前加载jQuery？ #

首先得澄清一个小误区：严格来说没有“页面加载前”加载jQuery的说法——页面加载是从浏览器请求HTML开始的，我们真正要做的是让jQuery在你需要执行的依赖代码之前加载完成，同时确保操作DOM的代码能找到目标元素。

这里有两种常用且靠谱的方式：

• 放在<head>标签中：
  直接把jQuery的引入脚本放在<head>里，这样它会在页面渲染前开始加载。但要注意，如果你的代码需要操作DOM元素，得用$(document).ready()包裹，不然会因为元素还没渲染而找不到：

  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      $(document).ready(function() {
        // 这里写依赖jQuery且操作DOM的代码
      });
    </script>
  </head>
  

• 放在<body>的最底部（更推荐）：
  把jQuery和你的业务代码都放在</body>标签之前，这样既不会阻塞页面渲染，又能确保所有DOM元素都已经加载完成，不需要额外的就绪事件，直接写代码就行：

  <body>
    <!-- 所有页面内容 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      // 这里可以直接写操作DOM的代码，元素都已存在
    </script>
  </body>
  

2. 修改悬停触发的替换操作为页面加载时执行 #

先看你的原代码，末尾多了一个多余的});，先修正这个小问题。然后要把鼠标悬停触发改成页面加载时自动执行，有两种简单的实现方式：

方式1：用DOM就绪事件（兼容性强） #

不管你的代码放在页面哪个位置，用$(document).ready()包裹就能确保DOM元素加载完成后再执行代码，避免找不到元素的情况：

$(document).ready(function() {
  // 获取#fieldsample的值，去掉转义后的HTML标签
  const cleanedContent = $("#fieldsample").val().replace(/(<([^>]+)>)/ig, "");
  // 把清理后的值赋值给#input_12_1
  $("#input_12_1").val(cleanedContent);
});

方式2：放在<body>底部（更简洁） #

如果把代码放在页面最后，</body>标签之前，此时所有DOM元素都已经渲染好了，直接执行代码就行，不需要额外的就绪事件：

<body>
  <!-- 你的页面元素，包括#fieldsample和#input_12_1 -->
  <input type="text" value="&lt;DT&gt;&lt;/DT&gt;&lt;DD&gt;content&lt;/DD&gt;" id="fieldsample" name="lname">
  <input type="text" id="input_12_1" name="your-input-name">
  
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    const cleanedContent = $("#fieldsample").val().replace(/(&lt;([^&gt;]+)&gt;)/ig, "");
    $("#input_12_1").val(cleanedContent);
  </script>
</body>

另外，你的正则表达式用来替换转义后的HTML标签（比如<对应<）是没问题的，如果需要更健壮的处理，也可以先把转义字符转换成真实HTML再提取文本，但现有逻辑已经能满足你的需求啦。

内容的提问来源于stack exchange，提问作者privacymx