Flash AS3中的文本链接 [英] Text links in Flash AS3

问题描述

所以我已经把它放在自己的wiki的应用程序上，为一些适用于Dropbox的朋友，这意味着所有的文件都被存储在本地并由大家更新。

So I've taken it upon myself to make a 'wiki'-esque application for some friends that works over Dropbox, which means that all the files are stored locally and updated by everyone.

每个文件都是Flash中拉入的.txt文件，然后使用简单的导航和搜索工具显示。

Every file is a .txt pulled in by the flash and then displayed using a simple navigation and search tool.

现在我正在尝试这更进一步，并链接其内容的文章。例如：

Now I am trying to take this a step further and link articles from their content. Example:

第1条称为苹果。其内容：苹果好吃
第二条称为熊。它的内容是：熊经常吃苹果。

Article 1 is called 'Apples'. Its content: 'Apples are delicious.' Article 2 is called 'Bears'. Its content: 'Bears often eat apples.'

现在当用户打开第2条时，我希望他们能够点击苹果这个词，然后打开第1条（苹果）。

Now when the user opens Article 2, I would like them to be able to click on the word 'apples', which would then open Article 1 ('Apples').

我想知道如何创建在动态文本框中点击特定单词的触发事件。不是整个动态文本框。

I would like to know how to create events that trigger on the click of a specific word in a dynamic text box. Not the whole dynamic text box.

我已经想到创建一个可点击的单词形式的动画片段，并将它们分层在这个单词上，但这太麻烦了

I have thought of creating movieclips in the shape of the word that are clickable and layering them over the word, but that is too much trouble if there is an easier option available.

提前感谢您的有见地的评论。

Thank you in advance for your insightful commentary.

推荐答案

您可以使用文本框的 htmlText 属性来动态地使单词链接。然后使用 TextEvent.LINK 事件来捕捉单词。

You can use the textbox's htmlText property to dynamically make the words links. Then use the TextEvent.LINK event to catch the word clicked.

在填充内容的文本框之前，只需迭代通过您的关键字列表，并执行 .replace（keyword，'< a href =event：keyword> keyword< / a>'）;

Before you populate the text box with the content, simply iterate through your list of "keywords" and do a .replace("keyword", '<a href="event:keyword">keyword</a>');

所以，你的代码看起来类似于：

So, your code will look something similar to:

// get the file contents using whatever method you use
var contents:String = getFileContents("page2.txt");

// assuming you have your keywords in an array
var keywords:Array = ["Apples", "Pears"];
for each (var keyword:String in keywords) {
    // replace the current keyword with a version of itself wrapped in a link
    contents = contents.replace(keyword, '<a href="event:' + keyword + '">' + keyword + '</a>');
}

yourTextField.htmlText = contents;

// add an eventlistener for the click
yourTextField.addEventListener(TextEvent.LINK, linkClicked);
function linkClicked(e:TextEvent):void {
    // load the article for the clicked word =]
    loadPage(e.text);
}

更新

如果你想忽略关键字的情况，所以苹果将匹配苹果（也将aPpLeS），您将需要使用正则表达式，以便您也可以保持原样在文本：

UPDATE
If you want to ignore the case of the keywords, so "apples" will match "Apples" (and so will "aPpLeS"), you'll need to use a regular expression so that you can also keep the word as-is in the text:

// build a |-separated list of keywords
var keywordList:String = "";
for each (var keyword:String in keywords) {
    keywordList += ((keywordList != "") ? "|" : "") + keyword;
}
// build the regex and replace each keyword in-place
var pattern:RegExp = new RegExp("(" + keywordList + ")", "gi"); // "i" for ignore-case =]
contents = contents.replace(pattern, '<a href="event:$1">$1</a>');

上面构建一个 | 的原因 - 分离的关键字列表，并且单个替换（而不是每个关键字的替换）是因为分隔列表将按顺序执行替换，并且不允许找到的关键字将由先前关键字插入的HTML（例如，for例如，你有一个关键字事件 - 如果被替换为< a href =< a href =event：event> event< / a> ;: keyword1> keyword1< / a> ）。

The reason the above builds a |-separated list of keywords and does a single replace (as opposed to a replace for each keyword) is because the separated-list will do the replacement in-order and not allow a found keyword break the HTML inserted by a previous keyword (say, for instance, you had a keyword "event" - the HTML would break if it was replaced to make <a href="<a href="event:event">event</a>:keyword1">keyword1</a>).

文本的原始文本将与事件一起发送。您可以搜索所有现有的关键字，并将其与传递给事件的搜索结果进行比较（将它们转换为小写，以 .toLowerCase（）进行比较） ，或者您可以规定主要关键字始终小写，而不必担心每次在列表中进行搜索。

The original-case of the text will be sent with the event. You can either do a search through all of your existing keywords and compare them with the one passed to the event (convert both to lower case with .toLowerCase() for the comparison), or you can make a rule that the primary keyword is always lowercase and not have to worry about searching through the list each time.

这篇关于Flash AS3中的文本链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！