javascript - 将数字值与网页上的单词相关联，然后将其乘以网页上该单词后面的数字

Question

<img src="http://lawyer.gif" />
<a href="http://lawyer.com">lawyer</a> (111)

或

<img src="http://doctor.gif" />
<a href="http://doctor.com">doctor</a> (222)

所以有多个页面包含与上面类似的html。我想为“律师”或“lawyer.gif”或其他任何内容的出现分配一个特定值，如果律师在页面上，则将其乘以 111，然后将其添加到“医生”乘以 222，如果医生在页面上页。有很多不同的可能“职业”(~50)，因此这里的代码非常简化。一页可能有医生、律师和消防员，而另一页可能只有牙医。然后，这个总和应该显示在页面上或弹出窗口中或其他任何地方。这里的111和222来自代码中括号内的数字，这些数字在每一页上都会发生变化。

我计划使用greasemonkey/javascript 来完成此操作，但只是因为我对此的经验有限。所以我想我的问题是，首先，这是否可以至少在某种程度上简单地完成，如果可以，有人至少可以给我一些提示来帮助我开始吗？谢谢。

Answer 1

一般来说:

1. 要处理很多事情，请使用数组:[blah1、blah2 等]
2. 要将临时值关联到临时标签，请使用对象:
   [ {blah1: 3.1}、{blah2: 415} 等]
3. 要检测和操作页面上的内容，请使用jQuery。
4. 要将显示或其他元素添加到页面，还可以使用 jQuery。

将所有内容放在一起，这是一个完整的脚本，它可以完成您的问题。您还可以see the code in action at jsFiddle. :

// ==UserScript==
// @name     Arbitrary math on arbitrary page values
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var textToValuesArray   = [
    {"doctor": 3}
    , {"lawyer": 5}
    , {"rodeo clown": 7}
    // etc.
];
var targetNodes = $("td.left:has(a)");
var targetText  = targetNodes.text ();
var reportValue = 0;

//-- Loop through the textToValuesArray.
$.each (textToValuesArray, function (index, textToValueObject) {
    var textTerm    = Object.keys (textToValueObject)[0];

    //-- Is the text term in the targeted part of the page?
    var termRegex   = new RegExp(textTerm, 'i'); // Case insensitive
    if (termRegex.test (targetText) ) {
        console.log ("Text '" + textTerm + "' was found!");

        /*-- Given the indicated page structure, targetText will look like:
            "doctor (2)lawyer (4)" etc.
            With the value we want coming one space after the target term
            and in parentheses.

            So, if we split the string on the search term, we get the next
            (number), if any.
        */
        var splitStr    = targetText.split (termRegex);
        if (splitStr  &&  splitStr.length > 1) {
            var multiplierString = splitStr[1].replace (/^\s*\((\d+)\).*$/, "$1");
            if (multiplierString) {
                var multiplierInteger = parseInt (multiplierString, 10);
                if (isNaN (multiplierInteger) ) {
                    console.log ("Multiplier value not found! (2)");
                }
                else {
                    /*-- We found a term and we found its multiplier.
                        Add to the report value.
                    */
                    var termValue   = textToValueObject[textTerm];
                    console.log (
                        "termValue: ", termValue,
                        "   ",
                        "multiplierInteger: ", multiplierInteger
                    );
                    reportValue    += termValue * multiplierInteger
                }
            }
            else {
                console.log ("Multiplier value not found! (1)");
            }
        }
        else {
            console.log ("Split string error!");
        }
    }
} );

console.log ("reportValue: ", reportValue);

$("body").prepend ('<div id="gmReport">The final value was: ' + reportValue + '</div>');
$("#gmReport").css ("background", "orange");