高亮关键词,仿淘宝

前段时间有人问类似淘宝的高亮关键词怎么做(如下图)
这里写图片描述

今天做了一个简单的demo 实验了一下,在这里记录分享一下。
首先布局文件如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

// 关键字
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="ni" >
    </TextView>


    <ListView
        android:id="@+id/ls"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>

</LinearLayout>

MainActivity 如下

public class MainActivity extends Activity {

    private ListView lView;
    private TextView tv;
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo);
        lView = (ListView) findViewById(R.id.ls);
        tv = (TextView) findViewById(R.id.tv);

        // 数据源
        ArrayList<String> strList = new ArrayList<String>(Arrays.asList(
                "nicaiyicai", "woshi ni", "woburenshinia"));

        adapter = new MyAdapter(this, strList, (String) tv.getText());
        lView.setAdapter(adapter);
    }
}

都做好了,看一下MyAdapter 的代码,最主要的逻辑都在MyAdapter 里,如下:

public class MyAdapter extends BaseAdapter {

    private Context mContext;  // 上下文
    private ArrayList<String> strList;// 数据
    private String flag; // 关键词,当然也可以改成数组 随你喜欢

    public MyAdapter(Context mContext, ArrayList<String> strList, String flag) {
        super();
        this.mContext = mContext;
        this.strList = strList;
        this.flag = flag;
    }

    @Override
    public int getCount() {
        return strList != null ? strList.size() : 0;
    }

    @Override
    public Object getItem(int position) {
        return strList != null ? strList.get(position) : null;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int arg0, View arg1, ViewGroup arg2) {

        TextView tv = new TextView(mContext);
        String str = strList.get(arg0);
// 这里是关键
// 使用SpannableString 对象进行格式化
// 至于你能通过 SpannableString  进行多少种效果,如下 

/**  引自官方 http://developer.android.com/reference/android/text/style/CharacterStyle.html

java.lang.Object
  ↳ android.text.style.CharacterStyle

Known Direct Subclasses  (直接已知子类)
    BackgroundColorSpan, ClickableSpan, ForegroundColorSpan, MaskFilterSpan, MetricAffectingSpan, RasterizerSpan, StrikethroughSpan, SuggestionSpan, UnderlineSpan

Known Indirect Subclasses (简介已知子类)
    AbsoluteSizeSpan, DynamicDrawableSpan, ImageSpan, LocaleSpan, RelativeSizeSpan, ReplacementSpan, ScaleXSpan, StyleSpan, SubscriptSpan, SuperscriptSpan, TextAppearanceSpan, TypefaceSpan, URLSpan
*/
Class Overview
        SpannableString span = new SpannableString(str);

        span.setSpan(new ForegroundColorSpan(Color.rgb(255, 0, 0)),
                str.indexOf(flag), str.indexOf(flag) + flag.length(),
                Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
        tv.setPadding(50, 50, 50, 50);
        tv.setText(span);
        return tv;
    }

}
### 回答1: JavaScript 高亮关键词包括: 1. 变量关键字:var、let、const 2. 函数关键字:function、return、async、await 3. 控制流关键字:if、else、switch、case、default、for、while、do、break、continue 4. 对象关键字:new、this、class、extends、super、static、prototype 5. 模块化关键字:import、export 6. 异常处理关键字:try、catch、finally、throw 7. 原始值关键字:true、false、null、undefined 8. 操作符关键字:typeof、instanceof、in、delete 除了这些关键词之外,JavaScript 中还有许多其他的关键词和标识符,如数学函数、字符串函数、数组函数等。熟练掌握这些关键词和函数可以帮助您更好地理解和编写 JavaScript 代码。 ### 回答2: 要实现 JavaScript 的关键词高亮,我们可以使用正则表达式来匹配关键词,然后给它们添加样式以进行高亮显示。 首先,我们需要获取要高亮显示的文本和关键词。可以通过手动设置或从用户输入中获取。假设我们有以下文本以及要高亮关键词列表: ```javascript var text = "JavaScript是一种动态类型、弱类型、基于原型的编程语言。它主要用于网页开发,能够实现动态交互效果和数据操作。"; var keywords = ["JavaScript", "动态类型", "数据操作"]; ``` 接下来,我们可以编写一个函数来高亮关键词: ```javascript function highlightKeywords(text, keywords) { // 将关键词数组转换为正则表达式 var regex = new RegExp(keywords.join("|"), "gi"); // 用 span 标签包裹匹配到的关键词 var highlightedText = text.replace(regex, function(match) { return "<span class='highlighted'>" + match + "</span>"; }); return highlightedText; } ``` 在这个函数中,我们首先将关键词数组通过 `join()` 方法转换为一个用 `|` 分隔的字符串,然后使用 `RegExp` 构造函数创建一个正则表达式对象。这个正则表达式对象将匹配任何关键词。 然后,我们使用 `replace()` 方法来替换文本中匹配的关键词。在这个方法的第二个参数中,我们传入一个回调函数,该函数接收每个匹配的关键词作为参数,并返回一个用 `<span class='highlighted'>` 包裹的关键词。这样,在返回的文本中,所有匹配的关键词都将被高亮显示。 最后,我们可以将高亮文本插入到网页中的某个元素中: ```javascript var highlightedText = highlightKeywords(text, keywords); document.getElementById("output").innerHTML = highlightedText; ``` 在这个例子中,我们假设有一个带有 id 为 "output" 的元素,用于显示高亮文本。 通过这样的方式,我们可以使用 JavaScript 实现简单的关键词高亮效果。 ### 回答3: 在JavaScript中,可以通过不同的方法来实现关键词高亮。以下是一种简单的实现方式: 首先,需要获取要进行高亮的文本内容,可以是一个段落、一句话或者是用户输入的文本。 接下来,我们可以使用JavaScript的string方法,例如replace()来替换文本中的关键词部分。可以使用正则表达式来匹配关键词,例如: var keyword = "关键词"; var text = "这是一段包含关键词的文本"; var regex = new RegExp(keyword, "gi"); var highlightedText = text.replace(regex, "<span class='highlight'>" + keyword + "</span>"); 在上述代码中,我们将关键词用html标签`<span class='highlight'>`包裹起来,以便后续进行样式调整。你也可以自定义其他的标签和class名称。 最后,我们将高亮结果显示在页面上,可以将其赋值给一个div元素的innerHTML属性,或者使用其他适合的方法将其展示出来。 需要注意的是,上述方法只是一种简单的实现方式,如果需要处理大量的文本内容或者有其他特殊需求,可能需要更加复杂的处理逻辑。 总之,在JavaScript中实现关键词高亮的方法有很多种,具体的实现方式可以根据需求和场景的不同来选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值