时间戳

首页 > 解决方案 > 在 Google 搜索结果中交换网站标题和链接 URL

jquery - 在 Google 搜索结果中交换网站标题和链接 URL

问题描述

这是 Google 搜索结果页面源代码的一部分。我想将 div 元素移动到 href 容器中。在这种情况下，我想交换第一个 div.TbwUpd 和最后一个 h3.LC20lb。所以，我想要这个：

<div class="g">
    <div data-hveid="CAMQAA" data-ved="2ahUKEwiy1bOI8IPlAhWVMN4KHfE2DXcQFSgAMAt6BAgDEAA">
        <div class "rc">
            <div class "r"> 
                <a href="https://www.merriam-webster.com/dictionary/meh" onmousedown="return>
                    <div class="TbwUpd">
                        <img class="xA33Gc" alt="https://www.merriam-webster.com/" height="16" src="data:image/png;base64,I=" width="16" data-atf="3"><cite class="iUh30 bc rpCHfe">Merriam-Webster › dictionary › meh</cite></div>
                    <br>
                    <h3 class="LC20lb">
                        <div class="ellip">Meh | Definition of Meh by Merriam-Webster</div></h3>
                </a>
            </div>
        </div>
    </div>
</div>

变成这样：

<div class="g">
    <div data-hveid="CAMQAA" data-ved="2ahUKEwiy1bOI8IPlAhWVMN4KHfE2DXcQFSgAMAt6BAgDEAA">
        <div class "rc">
            <div class "r"> 
                <a href="https://www.merriam-webster.com/dictionary/meh" onmousedown="return>
                    <h3 class="LC20lb">
                        <div class="ellip">Meh | Definition of Meh by Merriam-Webster</div></h3>
                    <br>
                    <div class="TbwUpd">
                        <img class="xA33Gc" alt="https://www.merriam-webster.com/" height="16" src="data:image/png;base64,I=" width="16" data-atf="3"><cite class="iUh30 bc rpCHfe">Merriam-Webster › dictionary › meh</cite></div>
                </a>
            </div>
        </div>
    </div>
</div>

我试图在这个用户脚本中这样做，但它没有用。

// ==UserScript==
// @name        Rearrange Goggle Search result :Swap Title and URL
// @include     https://www.google.com/search*
// @version     1
// @grant       none
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==

$('.TbwUpd').appendTo('.LC20lb');

原来的

元素交换后

标签： jqueryhtmlgreasemonkeytampermonkeyuserscripts

解决方案

1- Google 结果是动态创建的，因此如果是这种情况，则需要大量其他代码来查找动态更改
2- 无需为一小段代码添加 700 多个函数长 JQuery。与纯 JavaScript 相比，它会更高效。（注意：JQuery 1 和 2 已被弃用，因为它们存在问题，应该避免使用）
3- 我猜要查找和更改的项目不止一项，因此 fowling 代码会找到所有这些

// ==UserScript==
// @name        Rearrange Google Search result :Swap Title and URL
// @include     https://www.google.com/search*
// @version     1
// @grant       none
// ==/UserScript==

document.querySelectorAll('a div.TbwUpd').forEach(item => {
  item.parentNode.appendChild(item.nextElementSibling); // put the <br> at the end
  item.parentNode.appendChild(item);                    // put the <div> at the end
});

4-如果它只有一项，那么

// ==UserScript==
// @name        Rearrange Google Search result :Swap Title and URL
// @include     https://www.google.com/search*
// @version     1
// @grant       none
// ==/UserScript==


const div = document.querySelector('a div.TbwUpd');
div.parentNode.appendChild(div.nextElementSibling); // put the <br> at the end
div.parentNode.appendChild(div);                    // put the div at the end

推荐阅读